<template>
    <div>
        <h3>机构显示</h3>
        <div>
            机构名称
            <input type="text" v-model="fenye.jgname">
            特色服务
            <select v-model="fenye.xiala">
                <option value="">请选择</option>
                <option :value="item.id" v-for="item in data1.list">{{ item.name }}</option>
            </select>
            <input type="button" value="查询" class="btn btn-primary" @click="getlist">
            <input type="button" value="批量删除" class="btn btn-primary" @click="pishan">
            <input type="button" value="批量已发布" class="btn btn-primary" @click="xiugai(1)">
            <input type="button" value="批量未发布" class="btn btn-primary" @click="xiugai(0)">
        </div>
        <table  class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="chall" @click="checkone">
                    </td>
                    <td>机构名称</td>
                    <td>机构封面</td>
                    <td>特色服务</td>
                    <td>营业时间</td>
                    <td>机构地址</td>
                    <td>联系电话</td>
                    <td>发布状态</td>
                    <td>发布详情</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" v-model="dis" :value="item.id" @click="checktwo">
                    </td>
                    <td>{{ item.jgname }}</td>
                    <td><img :src="item.tu" width="100" height="100" alt=""></td>
                    <td>{{ item.name }}</td>
                    <td>{{moment(item.yingye).format("YYYY-MM-SS HH:mm:ss")}}</td>
                    <td>{{ item.dizhi }}</td>
                    <td>{{ item.phone }}</td>
                    <td>{{ item.steat==1?"已发布":"未发布" }}</td>
                    <td>{{ item.xiangq }}</td>
                    <td>
                        <input type="button" value="详情" class="btn btn-primary" @click="xiang(item.id)">
                        <input type="button" value="删除" class="btn btn-primary" @click="shan(item.id)">
                        <input type="button" value="修改" class="btn btn-primary" @click="xiu(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共{{data.tpage}}页</span>
        <span>共{{data.tcount}}条</span>
        <span>共{{fenye.tcount}}/{{data.tpage}}页</span>
        <input type="button" value="首页" class="btn btn-primary" @click="fyyyy(1)">
        <input type="button" value="上一页" class="btn btn-primary" @click="fyyyy(fenye.pageindex-1)">
        <input type="button" value="下一页" class="btn btn-primary" @click="fyyyy(fenye.pageindex+1)">
        <input type="button" value="尾页" class="btn btn-primary" @click="fyyyy(data.tpage)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import {ref,reactive, onMounted, toValue} from 'vue'
import {useRoute,useRouter} from 'vue-router'
const route=useRoute();
const router=useRouter();

let fenye:any=reactive({
    pageindex:1,
    pagesize:2,
    jgname:'',
    xiala:''
})

const data:any=reactive({
    list:[],
    tcount:0,
    tpage:0
})
onMounted(()=>{
    getlist();
})
const getlist=()=>{
    axios({
        url:'/api/jg/show',
        method:'get',
        params:fenye
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.tcount=res.data.tcount;
        data.tpage=res.data.tpage;
    })
    .catch((err)=>{
        console.log(err);
    })
}
const fyyyy=(num:any)=>{
    if(num<1)
{
    fenye.pageindex=1;
    return;
}
 if(data.tpage<num)
{
    fenye.pageindex=data.tpage;
    return;
}
fenye.pageindex=num;
getlist();
}
const shan=(id:any)=>{
    let t=confirm('确定删除吗')
    if(t=true)
{
    axios({
        url:'/api/jg/shanchu',
        method:'delete',
        params:{
            id:id
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert('删除成功');
        getlist();
    }
    else
    {
        alert('删除失败');
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
    })
}
    
}
const xiu=(id:any)=>{
    router.push({
        path:("/Update"),
        query:{
            id:id
        }
    })
}
const data1:any=reactive({
    list:[]
})
onMounted(()=>{
    getlist1();
})
const getlist1=()=>{
    axios({
        url:'/api/jg/shosw',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        data1.list=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
let chall=ref(false);
let dis=ref([]);
const checkone=()=>{
    chall.value=!chall.value;
    if(chall.value==true)
{
    dis.value=data.list.map((item:any)=>{
        return item.id;
    })
}
else 
{
    dis.value=[];
}
}
const checktwo=()=>{
    if(dis.value.length==data.list.length)
{
    chall.value=true;
}
else
{
    chall.value=false;
}
}
const pishan=(id:any)=>{
    let t=confirm('确定删除吗')
    if(t=true)
{
    axios({
        url:'/api/jg/shanchu',
        method:'delete',
        params:{
            id:dis.value.toString()
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert('删除成功');
        getlist();
    }
    else
    {
        alert('删除失败');
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
    })
}
}
const xiugai=(steat:any)=>{
    let t=confirm('确定修改吗')
    if(t=true)
{
    axios({
        url:'/api/jg/zhuang',
        method:'put',
        params:{
            id:dis.value.toString(),
            steat:steat
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert('修改成功');
        getlist();
    }
    else
    {
        alert('修改失败');
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
    })
}
}
const xiang=(id:any)=>{
    router.push({
        path:'/Xiang',
        query:{
            id:id
        }
    })
}
</script>

<style scoped>

</style>